{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>搜索</title>
<style type="text/css">
    .mui-content{ padding-top: 44px;}
    .mui-grid-view.mui-grid-9:before{height: 1px;}
    .mui-slider-indicator{text-align: left;}
    .xw-border-bottom1{position: fixed;z-index: 1; width: 100%;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="bbs-search-box xw-border-bottom1">
    <div class="mui-pull-left bbs-search bbs-search-input">
        <i class="iconfont icon-sousuo"></i>
        <input class="bbs-search-input" type="text" name="search" value="" placeholder="输入关键字搜索" />
    </div>
    <a class="bbs-my-interaction bbs-cancel mui-pull-right">取消</a>
</div>
<div class="mui-content">
    <!--搜索结果-->
    {%for item in data%}
    {%if item.typeName == 2%}
        {%if item.images.length > 1%}
    <div class="mb-post-list-3 xw-border-bottom">
        <a class="bbs-user-info mui-clearfix" href="javascript:void(0)">
            <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
            <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
        </a>
        <a href="askquestions?id={{item.id}}">
            <h4 class="mui-ellipsis-2">{{item.title}}</h4>
            <div class="mb-post-imgs">
                <ul class="mui-clearfix">
                    {%for item2 in item.images%}
                    <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                    {%endfor%}
                </ul>
            </div>
        </a>
        <p class="bbs-operaton bbs-operaton1 mui-clearfix">
            <span class="mui-pull-left">{{item.createDate}}</span>
            <span class="mui-pull-right">回答{{item.commentCount}}</span>
        </p>
    </div>
        {%else%}
    <div class="mb-post-list-1 xw-border-bottom">
        <a class="bbs-user-info mui-clearfix" href="javascript:void(0)">
            <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
            <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
        </a>
        <a href="askquestions?id={{item.id}}">
            <h4 class="mui-ellipsis-2">{{item.title}}</h4>
            <div class="mb-post-imgs">
                <ul class="mui-clearfix">
                    {%for item2 in item.images%}
                    <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                    {%endfor%}
                </ul>
            </div>
        </a>
        <p class="bbs-operaton bbs-operaton1 mui-clearfix">
            <span class="mui-pull-left">{{item.createDate}}</span>
            <span class="mui-pull-right">回答{{item.commentCount}}</span>
        </p>
    </div>
    {%endif%}

    <!--三张图片-->
    {%else%}
        {%if item.images.length > 1%}
    <div class="mb-post-list-3 xw-border-bottom">
        <a href="postdetail?id={{item.id}}">
            <h4 class="mui-ellipsis-2">{{item.title}}</h4>
            <div class="mb-post-imgs">
                <ul class="mui-clearfix">
                    {%for item2 in item.images%}
                    <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                    {%endfor%}
                </ul>
            </div>
        </a>
        <p class="bbs-operaton mui-clearfix">
            <span class="mui-pull-right mui-active"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
            <span class="mui-pull-right"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
        </p>
    </div>
        {%else%}
    <div class="mb-post-list-1 xw-border-bottom">
        <a href="postdetail?id={{item.id}}">
            <h4 class="mui-ellipsis-2">{{item.title}}</h4>
            <img src="{{ctx.app.config.api.image}}/{{item.images}}"/>
        </a>
        <p class="bbs-operaton bbs-operaton1 mui-clearfix">
            <span class="mui-pull-left mui-active"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
            <span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
            <span class="mui-pull-right">{{item.createDate}}</span>
        </p>
    </div>
        {%endif%}
    {%endif%}
</div>
{%endfor%}
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $('.iconfont').on('click',function(){
        let url = location.host +'/search';
        let url2 = location.search;
        let url3 = url2.substr(0,12);
        let cont = $('input[name="search"]').val();
        console.log(url+url3+cont);
        window.location.href="http://"+url+url3+cont;
        mui.get('/search', {
            },function(data){
                if(data.code!=200){
                    console.log('正在搜索..');
                }else{
                    mui.toast('搜索成功');
                }
            },'json'
        );
    });

</script>
<!--flotdemo-->
{% endblock %}
